<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="会议列表"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: true, y: '100%', minWidth: 1000 }"
      :disabled-tools="['size']"
      @refresh="search"
    >
      <template #custom-left>
        <div class="search-box">
          <a-input
            v-model="queryForm.name"
            placeholder="请输入会议名称"
            allow-clear
            class="search-input"
            @input="handleSearch"
          >
            <template #prefix><icon-search /></template>
          </a-input>
          <a-button @click="reset">重置</a-button>
        </div>
      </template>
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.conferenceState)">
          {{ getStatusText(record.conferenceState) }}
        </a-tag>
      </template>
    </GiTable>

    <!-- 会议详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      :title="meetDetail?.subject"
      :width="800"
      :footer="false"
      @cancel="detailVisible = false"
    >
      <div v-if="meetDetail" class="meet-detail">
        <div class="detail-item">
          <span class="label">会议主题：</span>
          <span class="value">{{ meetDetail.subject }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议室：</span>
          <span class="value">{{ meetDetail.meetingRoomName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议时间：</span>
          <span class="value">{{ meetDetail.startTime }} - {{ meetDetail.endTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议人数：</span>
          <span class="value">{{ meetDetail.size }}人</span>
        </div>
        <div class="detail-item">
          <span class="label">会议状态：</span>
          <span class="value">
            <a-tag :color="getStatusColor(meetDetail.conferenceState)">
              {{ getStatusText(meetDetail.conferenceState) }}
            </a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议地点：</span>
          <span class="value">{{ meetDetail.location }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议信息：</span>
          <span class="value">{{ meetDetail.conferenceInfo }}</span>
        </div>
        <div class="detail-item">
          <span class="label">参会人：</span>
          <div class="participants">
            <a-avatar
              v-for="participant in meetDetail.participants"
              :key="participant.userid"
              :size="32"
              :image-url="participant.avatar"
              class="participant-avatar"
            >
              {{ participant.realname?.charAt(0) }}
            </a-avatar>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { getMeetDetail } from '@/apis/meet'
import type { MeetResp } from '@/apis/meet/type'

const detailVisible = ref(false)
const meetDetail = ref<MeetResp>()

const columns: TableInstanceColumns[] = [
  { title: '会议主题', dataIndex: 'subject', width: 200 },
  { title: '会议室', dataIndex: 'meetingRoomName', width: 150 },
  { title: '会议时间', dataIndex: 'startTime', width: 180 },
  { title: '会议人数', dataIndex: 'size', width: 100 },
  { title: '会议状态', dataIndex: 'conferenceState', slotName: 'status', width: 100 },
  { title: '创建人', dataIndex: 'createUserName', width: 120 }
]

// 显示会议详情
const showMeetDetail = async (record: any) => {
  try {
    const res = await getMeetDetail(record.conferenceId)
    meetDetail.value = res.data
    detailVisible.value = true
  } catch (_error) {
    Message.error('获取会议详情失败')
  }
}

// 获取状态颜色
const getStatusColor = (status: number) => {
  const statusMap: Record<number, string> = {
    0: 'blue', // 待开始
    1: 'green', // 进行中
    2: 'red', // 已结束
    3: 'orange' // 已取消
  }
  return statusMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待开始',
    1: '进行中',
    2: '已结束',
    3: '已取消'
  }
  return statusMap[status] || '未知'
}
</script>

<style lang="scss" scoped>
.meet-detail {
  padding: 16px;

  .detail-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 100px;
      color: var(--color-text-2);
      font-weight: 500;
    }

    .value {
      flex: 1;
      color: var(--color-text-1);
    }

    .participants {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .participant-avatar {
        cursor: pointer;
        transition: transform 0.2s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
